<template>
	<view class="page user">
		<view class="header card-pd">
			<view class="top tr" v-show="false">
				<view href="#/setting" class=""><i class="iconfont icon-shezhi1" style="color: rgb(255, 255, 255);"></i></view>
			</view>
			<view class="tc">
				<view class="photo" style="background-image: url(../../static/no-photo.png);"></view>
			</view>
			<view class="info-box">
				<view class="flex-box mt-sm money" v-show="hasLogin">
					<view class="flex tc">
						<view class="f-mini c-3">用户名</view>
						<view class="f-large c-1"> {{ account }}</view>

					</view>
					<view class="flex tc">
						<view class="f-mini c-3">人民币</view>
						<view class="f-large c-1">{{ money }}</view>

					</view>
				</view>
				<view class="flex-box mt-sm unlogin" v-show="!hasLogin" @tap="showModal()">
					<view class="page-section-title">游客，请点击注册或者登录！</view>
				</view>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list">

				<!-- <view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/mymoney.png"></image>推广下线
						</view>

					</view>
					<navigator url="feedback" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/mymoney.png"></image>推广下线
						</view>
					</navigator>
				</view> -->
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/detail.png"></image> 资金往来
						</view>
					</view>
					<navigator url="moneylog" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/detail.png"></image>资金往来
						</view>

					</navigator>

				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/charge.png"></image>额度互转
						</view>

					</view>
					<navigator url="charge" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/charge.png"></image>额度互转
						</view>

					</navigator>

				</view>

				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/desipt.png"></image>在线存款
						</view>

					</view>
					<navigator url="../cash/deposit" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/desipt.png"></image>在线存款
						</view>

					</navigator>

				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/withdraw.png"></image>在线取款
						</view>
					</view>
					<navigator url="../cash/withdraw" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/withdraw.png"></image>在线取款
						</view>
					</navigator>

				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/alipay.png"></image>支付宝信息
						</view>

					</view>
					<navigator url="alipay" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/alipay.png"></image>支付宝信息
						</view>
					</navigator>

				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/card.png"></image>银行卡信息
						</view>
					</view>
					<navigator url="card" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/card.png"></image>银行卡信息
						</view>
					</navigator>

				</view>

				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						<view>
							<image class="innerIMG" src="../../static/icon/share.png"></image>分享推广
						</view>
					</view>
					<navigator url="qrcode" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<image class="innerIMG" src="../../static/icon/share.png"></image>分享推广
						</view>
					</navigator>

				</view>

				<!-- <view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin" @tap="showModal()">
						问题反馈
					</view>
					<navigator url="feedback" v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right">
						问题反馈
					</navigator>

				</view> -->
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-navigate-right" v-show="!hasLogin">
						<view>
							<image class="innerIMG" src="../../static/icon/logout.png"></image>退出
						</view>
					</view>
					<navigator v-show="hasLogin" class="uni-list-cell-navigate uni-navigate-right" @tap="tologout()">
						<view>
							<image class="innerIMG" src="../../static/icon/logout.png"></image>退出
						</view>
					</navigator>

				</view>


			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				account: '游客',
				money: '0',
				reload: false
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'mainMoney', 'token', 'apiUrl']),
		onLoad() {
			this.account = this.userName;
			//this.money = this.mainMoney;
			this.getMoney();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getMoney();
		},
		methods: {
			...mapMutations(['logout', 'back', 'storeMoney']),
			getMoney: function() {
				const data = {
					platform: '_main',
					token: this.token,
					f: 1,
				};
				uni.request({
					url: this.apiUrl + 'app/balance',
					data: data,
					method: 'POST',
					success: (data) => {
						if (data.data.code == 1) {
							this.money = data.data.data;
							this.storeMoney(data.data.data);
                             this.reload = false;
							//console.log('5525r' + this.grids[index].money);
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}

				})
			},
			showModal: function(e) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能玩游戏',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					//showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							uni.navigateTo({
								url: '../user/login'
							})
						} else {
							console.log('back');
							uni.navigateBack();
						}
					}

				});
			},
			tologout: function(e) {
				uni.showModal({
					title: '退出',
					content: '您确定退出休息一会？',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					//showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							this.logout();
							uni.reLaunch({
								url: '../index/index'
							})
						} else {
							console.log('back');
							uni.navigateBack();
						}
					}

				});
			},
		}
	}
</script>

<style>
	label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	}

	.page-section-title {
		font-size: 28rpx;
		color: #999999;
		margin-top: 0rpx;
		margin-bottom: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

	}

	.innerIMG {
		height: 47upx;
		width: 45upx;
		line-height: 47upx;
		margin-right: 15upx;

	}

	page {
		background-color: white;

	}



	.user .header .top {
		position: absolute;
		top: 20px;
		right: 15px;
	}

	.user .header .sign {
		position: absolute;
		left: 15px;
		top: 15px;
		height: 36px;
		line-height: 36px;
		padding: 0 15px;
		background-color: rgba(255, 255, 255, 0.37);
		border-radius: 18px;
		-webkit-box-shadow: 0 2px 5px #d2413c;
		box-shadow: 0 2px 5px #d2413c;
	}

	.user .header .sign a {
		color: #ffffff;
	}

	.user .header .sign img {
		width: 20px;
		padding-right: 2px;
	}

	.user .header .sign .tips-point {
		position: absolute;
		right: 5px;
		top: 5px;
	}

	.user .header i {
		font-size: 20px;
	}

	.user .header .photo {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-size: cover;
		margin-bottom: 0.3125rem;
		border: 4px solid #ffffff;
		-webkit-box-shadow: 0 2px 5px rgba(241, 74, 69, 0.67);
		box-shadow: 0 2px 5px rgba(241, 74, 69, 0.67);
		position: absolute;
		top: 80px;
		left: 50%;
		margin-left: -50px;
		z-index: 1000;
	}

	.user .header .money {
		line-height: 1.8;
		margin-top: 48upx;
	}

	.user .link {
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		padding: 7px 0;
		height: 34px;
		line-height: 34px;
		background-color: #ffffff;
		font-size: 18px;
		width: 96%;
		margin: 0 2%;
		border-radius: 5px;
	}

	.user .link i {
		font-size: 20px;
		padding-right: 0.5rem;
	}

	.user .link a.router-link {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.user .info-box {
		position: absolute;
		top: 150px;
		left: 0;
		background-color: #ffffff;
		-webkit-box-shadow: 0 1px 5px #fdc2c1;
		box-shadow: 0 1px 5px #fdc2c1;
		width: 96%;
		margin: 0 2%;
		height: 100px;
		border-radius: 12px;
		z-index: 10;
		padding-top: 20px;
	}

	.unlogin {
		text-align: center;
		width: 100%;
		margin-top: 60upx;
		display: block;


	}

	.money {
		padding-right: 15upx;
	}

	.user {
		text-align: center;

	}

	.uni-list-cell:after {
		left: 0upx;
	}

	.btn-submit {
		background-color: #007aff;
		color: #ffffff;
	}

	.uni-input {
		width: 80%;
		padding-left: 30upx;
	}

	.uni-list:before {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		left: 0;
		height: 0rpx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #fff;

	}

	.uni-list:after {
		background-color: #fff;
	}

	.uni-list-cell:after {
		position: absolute;
		right: 30rpx;
		bottom: 0;
		left: 0rpx;
		height: 1rpx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #ccc;

	}
</style>
